<template>
  <view class="withdrawal-page">
    <!-- 顶部导航栏 -->
    <view class="header">
		<view class="back-btn" @click="backPage()">
			<view class="back-icon"></view>
		</view>
		<view class="title">申请提现</view>
		<view class="menu-icons">
			<text class="dots">•••</text>
			<text class="circle">◉</text>
		</view>
    </view>
    
    <!-- 账户余额卡片 -->
    <view class="card">
      <view class="balance-row">
        <text class="balance-label">账户余额</text>
        <text class="balance-amount">¥{{wl.current_balance}} </text>
      </view>
      
      <!-- 提现表单 -->
      <view class="form-group">
        <text class="form-label">提现金额</text>
        <input class="form-input" type="text" placeholder="" v-model="money" />
        <text class="currency-unit">元</text>
      </view>
      
      <view class="form-group">
        <text class="form-label">真实姓名</text>
        <input class="form-input" type="text" placeholder=""  v-model="name"/>
      </view>
      
     
      
      <view class="form-group">
        <text class="form-label">请输入银行卡号</text>
        <input class="form-input card-input" type="text" placeholder=""  v-model="bankNumber"/>
      </view>
      
      <view class="disclaimer">
        <text>车联网服务平台不会通过任何渠道泄露您的个人信息，请放心填写</text>
      </view>
      
      <view class="submit-btn">
        <text @click="submitok()">确认信息并提交</text>
      </view>
    </view>

      
     
    </view>
 
</template>

<script setup>
import { onMounted, ref } from 'vue';
import baseUrl from '../../../util/urlConfig';
import request from '../../../util/request';


const loginId = uni.getStorageSync("merchant")

const wl = ref({
  id:0,
  merchant_id:0,
  current_balance:0,
  cash_withdrawal:0,
})


const maxMoney = ref(0)

const sumMoney = ref(0)



function getTixian() {
	console.log(11111,loginId.id)
    request({	
        url: baseUrl + "/xyq/withdrawal/"+loginId.id,
        method: "GET",
        success(res) {
			 wl.value.id = res.data.data.id
			 wl.value.current_balance = res.data.data.currentBalance
			 wl.value.merchant_id = res.data.data.merchantId
			 wl.value.cash_withdrawal = res.data.data.cashWithdrawal
			 sumMoney.value = res.data.data.currentBalance+ res.data.data.cashWithdrawal
			 console.log(res)
			}
			
		})
}


onMounted(()=>{
	getTixian()
})

const money = ref(0)
const name = ref("")
const bankNumber = ref("")

function submitok() {
    request({
        url: baseUrl + "/xyq/withdrawal/" + loginId.id + "/" + money.value,
        method: "GET",
        success(res) {
            console.log(res.data)
            // 提示用户等待审核
            uni.showToast({
                title: '提现申请已提交，等待审核',
                icon: 'none'
            });
        }
    })
}
	// 返回上一页
	function backPage(){
	  uni.navigateBack()
	}


</script>

<style>
.withdrawal-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 头部样式 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  background-color: #1e90ff;
  color: white;
  padding: 0 15px;
  position: relative;
}

.title {
  font-size: 18px;
  font-weight: 500;
}

.menu-icons {
  display: flex;
  align-items: center;
}

.dots {
  font-size: 20px;
  margin-right: 10px;
}

.circle {
  font-size: 22px;
}

/* 卡片样式 */
.card {
  background-color: white;
  border-radius: 10px;
  margin: 15px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.balance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.balance-label {
  font-size: 16px;
  color: #333;
}

.balance-amount {
  font-size: 18px;
  color: #ff4500;
  font-weight: 500;
}

/* 表单样式 */
.form-group {
  margin-bottom: 15px;
  position: relative;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}

.form-input, .dropdown-input {
  width: 100%;
  height: 40px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  padding: 0 15px;
  box-sizing: border-box;
  font-size: 14px;
}

.currency-unit {
  position: absolute;
  right: 15px;
  top: 38px;
  color: #666;
}

.dropdown-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.placeholder {
  color: #999;
}

.dropdown-icon {
  color: #999;
}

.disclaimer {
  margin: 15px 0;
  font-size: 12px;
  color: #999;
  text-align: center;
  line-height: 1.5;
}

.submit-btn {
  background-color: #1e90ff;
  height: 45px;
  border-radius: 22.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  font-weight: 500;
  margin-top: 20px;
}

/* 提现记录样式 */
.history-section {
  background-color: white;
  margin: 15px;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.history-title {
  font-size: 16px;
  color: #333;
  font-weight: 500;
  margin-bottom: 15px;
}

.history-item {
  padding: 10px 0;
}

.item-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.item-title {
  font-size: 14px;
  color: #333;
}

.item-amount {
  font-size: 14px;
  color: #ff4500;
}

.item-details {
  display: flex;
  justify-content: space-between;
}

.item-date {
  font-size: 12px;
  color: #999;
}

.item-status {
  font-size: 12px;
}

.status-pending {
  color: #999;
}

.status-approved {
  color: #52c41a;
}

.status-rejected {
  color: #ff4d4f;
}

.divider {
  height: 1px;
  background-color: #f0f0f0;
  margin: 10px 0;
}

.back-btn{ margin-left: 20rpx; width: 50rpx; height: 50rpx; position: relative;}	
.back-icon { width: 30px; height: 30px;}	
.back-icon::before { content: ""; position: absolute; width: 20px; height: 2px; background-color: #fff; top: 15rpx; left: 47rpx; transform: translate(-50%, -50%); }
.back-icon::after { content: ""; position: absolute; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); top: 5rpx; left: 30rpx;}	       
</style>
